<template>
	<div class="setup">
		<p>count的值为{{count}}---{{name}}</p>
		<button @click="increment()">+1</button>
	</div>
</template>

<script>
import { ref} from "@vue/composition-api";
export default {
	setup(props, ctx) {
          // 定义响应式数据对象
        const state = reactive({
        count: 0,
        name:"晚会以"
        })

        // 定义页面上可用的事件处理函数
        const increment = () => {
            state.count++
        }

        // 在 setup 中返回一个对象供页面使用
        // 这个对象中可以包含响应式的数据，也可以包含事件处理函数
        return {
            // 将 state 上的每个属性，都转化为 ref 形式的响应式数据
            ...toRefs(state),
            // 自增的事件处理函数
            increment
        }
	}
};
</script>
<!--
一.ref 也是可以创造响应数据
-->
